<template>
    <el-card class="index">
      <div slot="header" class="clearfix">
        <span>结算配置</span>
        <span><el-switch style="display: block"  v-model="form.settle_status"  @change="switchChange" active-color="#13ce66" inactive-color="#D9D9D9" :inactive-value="'0'" :active-value="'1'" active-text="开"  inactive-text="关" /></span>
      </div>
      <div class="form" v-if="form.settle_status == 1">
        <el-form :model="form" :inline="true" :rules="formRules" ref="formRules" label-width="180px" >
          <el-row>
             <el-col :span="12">
               <el-form-item label="结算周期" prop="settle_cycle" >
                 <el-select style="width: 275px" v-model="form.settle_cycle" clearable placeholder="请选择用户类型">
                   <el-option label="T1" value="T1" />
                   <el-option label="D1" value="D1" />
                 </el-select>
               </el-form-item>
             </el-col>
             <el-col :span="12">
               <el-form-item label="起结金额"  >
              <el-input style="width: 275px" type="number" @blur="minAmtBlur " v-model.trim="form.min_amt" placeholder="请输入起结金额" clearable class="selWidth" size="small" />
               </el-form-item>
             </el-col>
          </el-row>
          <el-row>
             <el-col :span="12">
               <el-form-item label="留存金额"  >
                  <el-input style="width: 275px" type="number" @blur="remainedAmtBlur "  v-model.trim="form.remained_amt" placeholder="请输入留存金额" clearable class="selWidth" size="small" />
               </el-form-item>
             </el-col>
             <el-col :span="12" >
                <div class="summary-text">
                    <span>结算摘要</span> <el-button type="text" @click="drawer = true">《配置示例说明》</el-button>
                </div>
                <div class="summary-input" >
                   <el-input  maxlength="64"  style="width: 275px" show-word-limit  type="textarea" :rows="2" v-model="form.settle_abstract" placeholder="请输入结算摘要，若需参数定制请参考《配置示例说明》输入摘要格式。"  />
                </div>
             </el-col>
          </el-row>
          <el-row style="margin-top:20px;">
             <el-col :span="12">
               <el-form-item label="结算手续费外扣标记" prop="out_settle_flag" >
                  <el-select style="width: 275px" v-model="form.out_settle_flag" clearable placeholder="请选择结算手续费外扣标记">
                    <el-option label="内扣" value="2" />
                    <el-option label="外扣" value="1" />
                  </el-select>
                </el-form-item>
             </el-col>
             <el-col :span="12" v-if="form.out_settle_flag == 1">
               <el-form-item label="结算手续费外扣汇付ID" prop="out_settle_huifuid" >
                  <el-input  maxlength="16"  style="width: 275px"   v-model.trim="form.out_settle_huifuid" placeholder="请输入结算手续费外扣汇付ID"  />
                </el-form-item>
             </el-col>
          </el-row>
          <el-row>
            <el-col :span="12" v-if="form.out_settle_flag == 1">
               <el-form-item label="结算手续费外扣账户类型" prop="out_settle_acct_type" >
                <el-select style="width: 275px" v-model="form.out_settle_acct_type" clearable placeholder="请选择结算手续费外扣子账户号">
                    <el-option label="基本户" value="01" />
                    <!-- <el-option label="充值户" value="05" /> -->
                  </el-select>
                </el-form-item>
             </el-col>
          </el-row>
      </el-form>
      </div>
      <el-drawer
      size="700px"
      title="配置示例说明"
      :visible.sync="drawer"
       direction="rtl"
        stripe
      :before-close="handleClose">
    <div class="drawer">
        <div class="drawer-symbol">
           <span>1.可配置项符号说明：</span>
           <el-table
              :data="tableData"
              :header-cell-style="tableHeaderColor"
               style="width: 100%;margin-top:20px;"
             >
              <el-table-column
                prop="label"
                label="名称"
                width="120">
              </el-table-column>
              <el-table-column
                prop="symbol"
                label="符号"
                width="100">
              </el-table-column>
              <el-table-column
                prop="text"
                label="格式输出示例"
               >
                <template slot-scope="scope">
                   <p v-if="scope.$index != 0"> {{ scope.row.text }}  </p>
                   <div v-else> 
                      <p> 若9月30日、10月8日、10月9日为工作日，10月1日至10月7日为节假日。 </p>
                      <p style="font-weight: bold;margin:20px 0 ;"> 该符号配置后显示情况 </p>
                      <p>  (1) 10月8日接收到的结算摘要内容: </p>
                      <p>&nbsp;&nbsp;若结算周期为T1，则显示：0930-1007 </p>
                      <p>&nbsp;&nbsp;若结算周期为D1，则显示：1007 </p>
                      <p>  (2) 10月9日接收到的结算摘要内容: </p>
                      <p>&nbsp;&nbsp;若结算周期为T1，则显示：1008 </p>
                      <p>&nbsp;&nbsp;若结算周期为D1，则显示：1008 </p>
                   </div>
                </template>
              </el-table-column>
           </el-table>
        </div>
        <div class="drawer-summary">
           <span class="drawer-summary-title">2.摘要内容定制格式：</span>
           <div class="drawer-summary-text"> 
               <span v-for="(item,index) in customTextList" :key="index"> {{ `格式${index + 1}：` +  item }}  <el-button size="medium" type="text" @click="copeyClick" v-clipboard:copy="item">复制</el-button></span>
           </div>
        </div>
        <div class="drawer-summary">
           <span class="drawer-summary-title">3.以10月9日结算款摘要内容为例：</span>
           <div class="drawer-summary-text"> 
               <span> 格式一的内容：“汇付结算款，交易日期1008，交易手续费2.00元” </span>
               <span> 格式二的内容：“汇付结算款，交易日期1008，交易手续费2.00元，结算手续费1.00元” </span>
               <span> 格式三的内容：“汇付结算款，交易日期1008，交易手续费2.00元，结算手续费1.00元，66660000123401，20240101 12:00:00，结算金额1.00元，到账金额1.00元” </span>
           </div>
        </div>
    </div>
  </el-drawer>
    </el-card>
</template>
<script>
 export default{
  name:'settlementConfig',
  props:{
      settleConfigEdit:[Object]
    },
  data(){
    return{
      form:{
        settle_status:'0',
        // tableList:[]
      },
      drawer:false,
      formRules:{
        settle_cycle:[{ required: true, message: '请选择结算周期', trigger: 'change' }],
        out_settle_flag:[{ required: true, message: '请选择结算手续费外扣标记', trigger: 'change' }],
        out_settle_huifuid:[{ required: true, message: '请输入结算手续费外扣汇付ID', trigger: 'change' }],
        out_settle_acct_type:[{ required: true, message: '请输入结算手续费外扣账户类型', trigger: 'change' }],
      },
      tableData:[{label:'交易日期',symbol:'$$D',text:'显示：2.00元'},
      {label:'交易手续费',symbol:'$$D',text:'显示：2.00元'},
      {label:'结算手续费',symbol:'$$SF',text:'显示：结算手续费1.00元'},
      {label:'商户号',symbol:'$$ID',text:'显示：66660000123401'},
      {label:'出款时间',symbol:'$$SD',text:'时间格式：YYYYMMDD HH:MM:SS，显示20240101 12:00:00'},
      {label:'结算金额',symbol:'$$SA',text:'商户账户结算出款金额，显示：结算金额1.00元'},
      {label:'到账金额',symbol:'$$TA',text:'到账金额=结算金额-结算手续费，其中外扣时结算手续费为0；显示：到账金额1.00元'}],
      customTextList:[ '汇付结算款，交易日期$$D，交易手续费$$TF' , '汇付结算款，交易日期$$D，交易手续费$$TF，$$SF' , '汇付结算款，交易日期$$D，交易手续费$$TF，$$SF，$$ID，$$SD，$$SA，$$TA' ],
    }
  },
  watch:{
      form:{
        handler(nValue , oValue){
          // console.log(this.form.settle_status)
          if(this.form.settle_status){
            this.$emit('settlementChange' ,nValue)
          }else{
            if(this.settleConfigEdit){
              // nValue.settle_status = 0
              this.$emit('settlementChange' ,nValue)
            }else{
              this.$emit('settlementChange' ,{})
            }
          }
       },
            deep:true
      },
      settleConfigEdit:{
        handler(nValue , oValue){
            this.form = nValue
            // console.log(this.form)
        },
        deep:true
      }
    },
  methods:{
    switchChange(v){
      //  console.log(v)
       this.form.settle_status = v
       this.$forceUpdate()
    },
    copeyClick(v){
      this.$message.success('复制成功！')
    },
    addRateTable(){
      this.form.tableList.push({})
    },
    rateTableDedel(index){
       this.form.tableList.splice(index,1)
    },
    minAmtBlur(){
      if(this.form.min_amt){
        this.form.min_amt = (this.form.min_amt * 1).toFixed(2)
      }
    },
    remainedAmtBlur(){
      if(this.form.remained_amt){
        this.form.remained_amt = (this.form.remained_amt * 1).toFixed(2)
      }
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
          if (rowIndex === 0) {
            return "background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;";
          }
       }
  }
 }
</script>

<style scoped>
   .index{
    width: 100%;
    margin-bottom: 30px;
   }
  
   .clearfix{
    display: flex;
    align-items: center;
    justify-content: space-between;
   }
   .summary-text{
     margin-left: 82px;
     font-size: 14px;
     color: #606266;
   }
   .summary-text span:nth-child(2){
    color: #0d6eff;
   }
   .summary-input{
    margin-left: 150px;
    margin-top: 15px;
   }
   .rate-tips span:nth-child(1){
    color: #606266;
    font-size: 14px;
   }
   .rate-tips span:nth-child(2){
    color: #f53f3f;
    font-weight: bold;
   }
   ::v-deep .el-item-table .el-form-item__content{
     width: 100% !important;
   }
   .rate-add{
    display: flex;
    align-items: center;
    justify-content: center;
   }
   .rate-add span:nth-child(1){
    display: inline-block;
    width: 50%;
    height: 1px;
    /* background-color: ; */
   }
   .drawer{
     padding:0 20px;
   }
   .drawer-symbol span{
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
   }

   .drawer-summary .drawer-summary-title{
    margin:20px 0;
    font-size: 14px;
    font-weight: 500;
    display:inline-block;
   }
   .drawer-summary-text span{
    display:inline-block;
    margin-bottom: 16px;
    color: #1d2129;
    font-size: 14px;
   }



</style>
